---
title: 开发与构建
description: '如何在新项目开始工作。'
i18nReady: true
---
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

一旦你有了一个 Astro 项目，那么你现在就可以使用 Astro 进行构建了！🚀

## 编辑你的项目

要对项目进行更改，请在代码编辑器中打开项目文件夹。在开发模式下运行开发服务器，能让你在编辑代码时查看站点的更新。

你还可以 [自定义开发环境的各个方面](#配置你的开发环境) ，例如配置 TypeScript 或者安装官方 Astro 编辑器扩展。

### 启动 Astro 开发服务器

Astro 自带了一个内置的开发服务器，它包含了项目开发所需的一切。`astro dev` CLI 命令将启动本地开发服务器，让你第一次看到你的新网站。

每个起始模板都预配置了一个脚本，该脚本将为你运行 `astro dev`。在进入你的项目目录后，使用你喜欢的包管理器运行此命令并启动 Astro 开发服务器。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>

如果一切顺利，Astro 将在 [http://localhost:4321/](http://localhost:4321/) 上为你的项目提供服务。在浏览器中访问该链接，查看你的新网站！

### 开发模式工作

Astro 将监听你的 `src/` 目录中的实时文件更改，并在你构建时更新你的网站预览，因此在开发过程中你无需重启服务器。当开发服务器运行时，你总能在浏览器中看到你网站的最新版本。

在浏览器中查看你的网站时，你将能够访问 [Astro 开发工具栏](/zh-cn/guides/dev-toolbar/)。在你构建时，它将帮助你检查你的 [群岛](/zh-cn/concepts/islands/)，发现无障碍问题等。

如果在启动开发服务器后无法在浏览器中打开你的项目，请返回运行 `dev` 命令的终端并检查显示的消息。它应该会告诉你是否发生了错误，或者你的项目是否在不同的 URL [http://localhost:4321/](http://localhost:4321/) 上提供服务。

## 构建并预览你的网站

若要检查将在构建时创建的网站版本，请退出开发服务器（<kbd>Ctrl</kbd> + <kbd>C</kbd>）并在你的终端中运行适用于你的包管理器的相应构建命令：

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run build
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm build
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run build
  ```
  </Fragment>
</PackageManagerTabs>

Astro 将在一个单独的文件夹（默认为 `dist/`）中构建你的网站的可部署版本，并且你可以在终端中看到其进度。这将在你部署到生产环境之前提醒你项目中的任何构建错误。如果 TypeScript 配置为 `strict` 或 `strictest`，`build` 脚本还将检查你的项目中的类型错误。

当构建完成后，在你的终端中运行适当的 `preview` 命令（例如 `npm run preview`），你就可以在同一个浏览器预览窗口中本地查看你的网站的构建版本。

请注意，这将预览你在最后一次运行构建命令时的代码状态。这旨在让你预览你的网站在部署到网络时的样子。在构建后对代码进行的任何更改都**不会**在你预览网站时反映出来，直到你再次运行构建命令。

使用（<kbd>Ctrl</kbd> + <kbd>C</kbd>）退出预览并在终端中运行另一个命令，例如重新启动开发服务器以返回 [开发模式工作](#开发模式工作)，它会随着你的编辑更新以显示你的代码更改的实时预览。

<ReadMore>阅读更多关于 [Astro CLI](/zh-cn/reference/cli-reference/) 和你在使用 Astro 构建时将使用的终端命令。</ReadMore>

:::tip 
在你开始添加或更改太多代码之前，你可能希望 [立即部署你的新网站](/zh-cn/guides/deploy/)。这有助于发布你的网站的最小工作版本，并可以节省你以后排查部署问题的时间和精力。
:::

## 接下来

好了！你现在可以开始使用 Astro 构建了！🥳

以下是我们建议接下来探索的几个主题，你可以按任何顺序阅读它们。你甚至可以暂时离开我们的文档去玩转你的新 Astro 项目代码库，当你遇到麻烦或有疑问时，欢迎你随时返回这里。

### 配置你的开发环境

探索以下指南来定制你的开发体验。

<CardGrid>
  <LinkCard
    title="编辑器设置"
    description="自定义你的代码编辑器以改善 Astro 开发者体验并解锁新功能。"
    href="/zh-cn/editor-setup/"
  />
  <LinkCard
    title="开发工具栏"
    description="探索开发工具栏中好用的功能。"
    href="/zh-cn/guides/dev-toolbar/"
  />
  <LinkCard
    title="TypeScript 配置"
    description="配置类型检查、代码补全等选项。"
    href="/zh-cn/guides/typescript/"
  />
</CardGrid>

### 探索 Astro 的特性

<CardGrid>
  <LinkCard
    title="了解你的代码库"
    description="在我们的项目结构指南中了解 Astro 的文件结构。"
    href="/zh-cn/basics/project-structure/"
  />
  <LinkCard
    title="创建内容集合"
    description="通过 frontmatter 验证和自动类型安全向你的新网站添加内容。"
    href="/zh-cn/guides/content-collections/"
  />
    <LinkCard
    title="添加视图过渡"
    description="创建无缝页面过渡和动画。"
    href="/zh-cn/guides/view-transitions/"
  />
  <LinkCard
    title="了解群岛"
    description="阅读关于 Astro 的群岛结构。"
    href="/zh-cn/concepts/islands/"
  />
</CardGrid>

### 学习入门教程

在我们的[入门教程](/zh-cn/tutorial/0-introduction/)中，从一个空白页面开始构建一个完全功能的 Astro 博客。  

这是一个了解 Astro 工作原理的好方法，它会引导你了解页面、布局、组件、路由、群岛等基础知识。对于那些对 Web 开发概念比较陌生的人，它还包括一个可选的、适合初学者的单元，将指导你在你的计算机上安装必要的应用程序、创建一个 GitHub 账户，并部署你的网站。
